<template>
	<view style="background-color: #FFFFFF;">
		<view style="position: relative;">
			<view style="display: flex;padding: 0 46rpx;">
				<view style="font-weight: bold;font-size: 60rpx;">{{weatherInfo.temperature}}℃ </view>
				<view style="font-weight: bold;border-left: 4rpx solid;height: 35rpx;margin-top: 24rpx;font-size: 26rpx;padding-left: 10rpx;margin-left: 25rpx;">{{weather.weather}}</view>
			</view>
			<!--天气图标位置-->
			<!-- <image src="../../static/address.png" style="height: 120rpx;width: 150rpx;position: absolute;right: 7%;top: 0;"></image> -->
			<view style="font-size: 54rpx;margin-top: 40rpx;padding: 0 46rpx;">{{city}}</view>
			<view class="content" style="display: flex;justify-content: space-around;margin-top: 70rpx;margin-bottom: 20rpx;">
				<view class="info"><text style="font-weight: bold;">湿度</text><br/>{{weatherInfo.humidity}}</view>
				<view class="info"><text style="font-weight: bold;">风力</text><br/>{{weatherInfo.direct}}{{weatherInfo.power}}</view>
				<view class="info" style="float: right;"><text style="font-weight: bold;">AQI</text><br/>{{weatherInfo.aqi}}</view>
			</view>
		</view>
		<uni-notice-bar scrollable="true" single="true" text="安全提示: 请您出行注意安全, 愿您在旅途中一脸的欢颜，快乐幸福永相伴。"></uni-notice-bar>
		<view class="hot_goods"
			style="display: flex;flex-direction: column;justify-content: center;align-items: stretch;">
			<view style="position: relative;">
				<image src="../../static/Icon/search.png" style="position: absolute;height: 40rpx;width: 40rpx;left: 4%;top: 30%;"></image>
				<input
					style="border: 1px solid #CCCCCC;margin:10px 5px;height:30px;border-radius: 10px;width:87%;float:left;flex: auto;padding-left: 70rpx;"
					class="uni-input" confirm-type="search" v-model="keyword" @confirm="getTravelByAddress"
					placeholder="搜索" />
			</view>
			

			<view class="tit" style="font-size: 20px;text-align: center;color: #000000;flex: auto;">热门推荐</view>

			<view class="tuijian_list">
				<!-- 利用遍历拿到数据库的内容 -->
				<view class="tuijian_item" v-for="item in travelList">
					<image style="width: 100%;border: 10rpx;border-radius: inherit;" :src="item.cover"
						@click="getById(item.id)" mode="widthFix"></image>
					<uni-steps :options="item.options" :active="item.options.length"></uni-steps>
					<view class="dianzanpinglun" style=" text-align: right;">
						<image src="../../static/Icon/dianzan.png" style="width: 50rpx; height: 50rpx;"></image>
						<text> 点赞数{{item.praiseCount.length}}</text>
						<image src="../../static/Icon/Star.png" style="width: 50rpx; height: 50rpx;"></image>
						<text> 收藏数{{item.collectCount.length}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import uni-notice-bar from 'uni-notice-bar.vue'
	export default {
		data() {
			return {
				travelList: [],
				city: '福州',
				keyword: '',
				// 如果接口没有调用成功就显示这些内容
				weatherInfo: {
					temperature: '0',
					info: 'https://trace666.oss-cn-beijing.aliyuncs.com/晴.png',
					humidity: '0',
					direct: '东',
					power: '2',
					aqi: '0'
				},
				weather: {
					weather: '0',
					weather: 'https://trace666.oss-cn-beijing.aliyuncs.com/晴.png'
				},
			}
		},

		onLoad() {
			this.initData();
		},

		methods: {
			getWeather() {
				uni.request({
					url: 'https://xunji.xmxland.space/getWeather',
					hod: 'GET',
					data: {
						city: '福州'
					},
					success: (res) => {
						let weather = res.data
						if (weather.error_code === 0) {
							this.city = weather.result.city
							this.weatherInfo = weather.result.realtime;
							this.weather = weather.result.future[0];
							this.weatherInfo.info = 'https://trace666.oss-cn-beijing.aliyuncs.com/' + this
								.weather.weather + '.png'
						}
					}
				});
			},
			getTravelByAddress() {
				let param = {
					keyword: this.keyword
				}
				uni.request({
					url: 'https://xunji.xmxland.space/findByAddressLike',
					method: 'GET',
					data: param,
					success: (res) => {
						this.travelList = res.data
						for (let i = 0; i < this.travelList.length; i++) {
							let options = []
							for (let j = 0; j < this.travelList[i].addressInfo.length; j++) {
								let params = {
									title: this.travelList[i].addressInfo[j].address,
									id: this.travelList[i].id
								}
								options.push(params)
							}
							this.travelList[i].options = options
						}
					}
				});
			},
			// 取得数据库内容的函数
			initData() {
				uni.request({
					url: 'https://xunji.xmxland.space/initData',
					method: 'GET',
					success: (res) => {
						this.travelList = res.data
						for (let i = 0; i < this.travelList.length; i++) {
							let options = []
							for (let j = 0; j < this.travelList[i].addressInfo.length; j++) {
								let params = {
									title: this.travelList[i].addressInfo[j].address,
									id: this.travelList[i].id
								}
								options.push(params)
							}
							this.travelList[i].options = options

							console.log(this.travelList[i])
						}
					}
				});

			},

			getById(id) {
				uni.navigateTo({
					url: '../../pages/index/sin?id=' + id
				})

			},
		},
		created() {
			this.getWeather()
			//this.initData()
		}

	}
</script>

<style lang="less" scoped>
	page {
		background-color: #F1F1F1;
	}

	.box2 {
		// width:100%;
		background-color: #FFFFFF;
		border: 1px solid #CCCCCC;
		position: relative;
		height: 150px;
		border: 10rpx;
		border-radius: 10px;
		padding-left: 5%;

		// margin-top: 10rpx;
		.content {
			width: 100%;
			float: left;

			.info {
				
				width: 30%;
				height: 40px;
				float: left;
			}
		}
	}
	
	.info{
		text-align: center;
	}
	.tit {
		text-align: center;
		font-weight: bold;
	}

	.tuijian_list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;

		// border: 1px solid #CCCCCC;
		// float: none;
	}

	.tuijian_item {

		// width:100%;
		border: 1px solid #CCCCCC;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
</style>
